<template>
  <div class="main">
    <div class="outerDiv">
      <!-- <goBack :white="true" aa="./planList" :hasTitle="true" topTitle="选科"></goBack> -->
        <headerBack>
        <b slot="my-center" style="font-weight:600">选科</b>
      </headerBack>
      <scroller lock-x>
        <div style="margin-top: 0.8rem;">
          <div class="collegeModel">
            <div class="headerTip">请在以下选科组合中选择一个组合</div>
            <div class="tabList">
              <div :class="['tabItem', choTabItem == 1 ? 'tabActive' : '']" @click="handleChoTab(1)">选课选科结果中选择</div>
              <div :class="['tabItem', choTabItem == 2 ? 'tabActive' : '']" @click="handleChoTab(2)">自主选择</div>
            </div>
            <div class="mainDiv" v-if="choTabItem == 1">
              <div class="searchInput">
                <span></span>
                <input v-on:blur="scrolltotop" type="text" placeholder="请输入科目名称" v-model="searchKey" @input="handleSearchKey" />
              </div>
              <div v-if="resultList.length > 0" class="resultList">
                <div v-for="(item, index) of resultList" :key="index" :class="['singleResult', choResultCollege == item ? 'hasChoCollege' : '']" @click="handleChoSearchSingleResult(item)">{{ handleSplitCourseName(item) }}</div>
              </div>
              <div v-else class="hasNoData">暂无数据</div>
            </div>
            <div class="mainDiv" v-else>
              <div class="tipTitle">您选择科目是</div>
              <div class="choCourseList">
                <div :class="['singleCourse', choCourseType == 1 ? 'hasChoCourse' : '', course_1 ? 'hasCourse' : '']" @click="handleChoPutIntoWhichCourse(1)">{{ course_1 ? course_1 : '请选择' }}</div>
                <span class="addIcon"></span>
                <div :class="['singleCourse', choCourseType == 2 ? 'hasChoCourse' : '', course_2 ? 'hasCourse' : '']" @click="handleChoPutIntoWhichCourse(2)">{{ course_2 ? course_2 : '请选择' }}</div>
                <span class="addIcon"></span>
                <div :class="['singleCourse', choCourseType == 3 ? 'hasChoCourse' : '', course_3 ? 'hasCourse' : '']" @click="handleChoPutIntoWhichCourse(3)">{{ course_3 ? course_3 : '请选择' }}</div>
              </div>
              <div class="subjectsList">
                <div v-for="(item, index) of subjectsList" :key="index" :class="['subItem', (course_1 == item || course_2 == item || course_3 == item) ? 'isChoosed' : '']" @click="handleChoSingleCourse(item)">{{ item }}</div>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 2rem;"></div>
        </div>  
      </scroller>
      <div class="btnArea" :style="isIos=='ios'?'bottom:0.96rem':''" v-show="choTabItem == 2">
        <div class="saveBtn" @click="handleSaveChoCourse">保存</div>
      </div>
    </div>
  </div>  
</template>

<script>
import ls from "store2";

import { getSubject, saveSubject } from "~/api/colleges";
import headerBack from "~/components/headerBack";
export default {
  components: {
    headerBack
  },
  data() {
    return {
      isIos:'',
      choTabItem: 1,
      searchKey: '', // 搜索关键词
      resultList: [], // 搜索结果
      choResultCollege: '',
      course_1: null, // 选择的课程1
      course_2: null, // 选择的课程2
      course_3: null, // 选择的课程3
      choCourseType: null, // 选择的是第几个课程
      subjectsList: ['政治', '历史', '地理', '化学', '生物', '物理', '技术'], // 课程列表
    }
  },
  mounted() {
    this.$visit(this.$route.path)
    this.isIos = this.commonJs.checkTerminal()

    this.getUsedRecord()
    if (this.$route.query.type) {
      const arr = this.$route.query.type.split('+')
      this.course_1 = arr[0]
      this.course_2 = arr[1]
      this.course_3 = arr[2]
    }
  },
  methods: {
    scrolltotop(){
      window.scroll(0,0)
    },
    getUsedRecord() {
      this.$loading('open')
      getSubject({ userType: ls.get('userType') }).then(res => {
        this.resultList = res.data ? JSON.parse(res.data) : []
      }).finally(() => {
        this.$hideLoading()
      })
    },
    handleChoTab(item) {
      this.choTabItem = item
      this.searchKey = ''
      // this.resultList = []
      // if (this.choTabItem == 1) {
      //   this.getUsedRecord()
      // }
    },
    // 搜索
    handleSearchKey() {
      // if (this.searchKey !== '') {
      //   if (this.choTabItem == 1) {
      //     this.getUsedRecord()
      //   }
      // }
    },
    handleChoSearchSingleResult(val) {
      this.choResultCollege = val
      this.course_1 = val[0]
      this.course_2 = val[1]
      this.course_3 = val[2]
      this.handleSaveChoCourse()
      
    },
    // 选择将选中的数据放入哪个课程盒子中
    handleChoPutIntoWhichCourse(index) {
      this.choCourseType = index
    },
    // 选择课程
    handleChoSingleCourse(course) {
      if (course !== this.course_1 && course !== this.course_2 && course !== this.course_3) {
        if (this.choCourseType) {
          switch(this.choCourseType) {
            case 1:
              this.course_1 = course;
              break;
            case 2:
              this.course_2 = course;
              break;
            default:
              this.course_3 = course;
              break;
          }
        } else {
          if (this.course_1 && this.course_2 && this.course_3) {
            this.$vux.toast.text('请选择你要修改的科目');
          } else if (this.course_1 && this.course_2) {
            this.course_3 = course
          } else if (this.course_1) {
            this.course_2 = course
          } else {
            this.course_1 = course
          }
        }
      }
    },
    // 保存已选科目
    handleSaveChoCourse() {
      if (this.course_1 && this.course_2 && this.course_3) {
        this.$loading('open')
        saveSubject({
          subject: `${this.course_1}+${this.course_2}+${this.course_3}`,
          userType: ls.get('userType')
        }).then(() => {
          // this.goto('./planList')
          this.$router.back()
        }).finally(() => {
          this.$hideLoading()
        })
      } else {
        this.$vux.toast.text('请选择科目！');
      }
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    // 处理选课选科中的课程名称格式
    handleSplitCourseName(arr) {
      let newString = ''
      for (let i = 0; i < arr.length; i += 1) {
        if (i == (arr.length - 1)) {
          newString += arr[i] 
        } else {
          newString = newString + arr[i] + '+'
        }
      }
      return newString
    }
  }
}
</script>

<style lang="less" scoped>
  .outerDiv {
    width: 100%;
    height: 100vh;
    background: #F7F7FA;
    position: relative;
    .collegeModel {
      padding: 0.32rem;
      .headerTip {
        color: #222;
        font-size: 0.26rem;
        line-height: 0.44rem;
        font-weight: bold;
        margin-bottom: 0.32rem;
      }
      .tabList {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: #F0F0F5;
        .tabItem {
          width: 3.42rem;
          height: 0.8rem;
          line-height: 0.8rem;
          text-align: center;
          color: #999;
          font-size: 0.28rem;
        }
        .tabItem.tabActive {
          color: @mainColor;
          font-weight: bold;
          background: url('~/static/sxPlan/select_courses_bg_tab_l.png') no-repeat 100% 100%;
          background-size: 100% 100%;
        }
        .tabItem:last-child.tabActive {
          background: url('~/static/sxPlan/select_courses_bg_tab_r.png') no-repeat 100% 100%;
          background-size: 100% 100%;
        }
      }
      .mainDiv {
        padding: 0.52rem 0.28rem 1.5rem;
        background: #fff;
        border-radius:0 0 0.1rem 0.1rem;
        .searchInput {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: 0.8rem;
          border-radius: 0.4rem;
          background: #F7F7FA;
          padding: 0.2rem 0.24rem;
          margin-bottom: 0.4rem;
          span {
            display: inline-block;
            width: 0.32rem;
            height: 0.32rem;
            margin-right: 0.24rem;
            background: url('~/static/sprite/other_sprites.png') 0.42rem -0.65rem;
            background-size: 4.68rem 4.08rem;
          }
          input {
            border: none;
            outline: none;
            background: #F7F7FA;
            width: 100%;
            font-size: 0.26rem;
            color: #222;
          }
        }
        .resultList {
          .singleResult {
            width: 100%;
            height: 0.96rem;
            line-height: 0.96rem;
            color: #222;
            font-size: 0.28rem;
            border-bottom: 1px solid #E5E8ED;
          }
          .hasChoCollege {
            color: @mainColor;
          }
        }
        .hasNoData {
          color: #999;
          text-align: center;
        }
        .tipTitle {
          margin-top: 0.22rem;
          color: #222;
          font-size: 0.28rem;
          font-weight: bold;
          margin-bottom: 0.32rem;
        }
        .choCourseList {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 0.4rem;
          border-bottom: 1px solid #E5E8ED;
          margin-bottom: 0.4rem;
          .addIcon {
            display: inline-block;
            width: 0.2rem;
            height: 0.2rem;
            background: url("~@/static/sprite/other_sprites.png") -0.1rem -3.8rem;
		        background-size: 4.68rem 4.08rem;
          }
          .singleCourse {
            width: 1.86rem;
            height: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
            border-radius: 0.4rem;
            border: 1px solid #E5E8ED;
            color: #C7C7C7;
            font-size: 0.3rem;
          }
          .hasChoCourse {
            color: @mainColor;
            border-color: @mainColor;
          }
          .hasCourse {
            color: @mainColor;
          }
        }
        .subjectsList {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          .subItem {
            width: 2.95rem;
            height: 0.96rem;
            line-height: 0.96rem;
            text-align: center;
            border-radius: 0.48rem;
            border: 1px solid transparent;
            background: #F7F7FA;
            color: #222;
            font-size: 0.3rem;
            font-weight: bold;
            margin-bottom: 0.32rem;
          }
          .isChoosed {
            color: #E5E8ED;
            border-color: #E5E8ED;
            background: #fff;
          }
        }
      }
    }
    .btnArea {
      width: 100%;
      height: 1.52rem;
      padding: 0.32rem 0.64rem;
      background: #fff;
      box-shadow:0px -4px 10px 0px rgba(204,204,204,0.2);
      position: fixed;
      bottom: 0;
      left: 0;
      .saveBtn {
        width: 100%;
        height: 0.88rem;
        line-height: 0.88rem;
        text-align: center;
        border-radius: 0.44rem;
        background: @mainColor;
        color: #fff;
        font-size: 0.3rem;
        font-weight: bold;
      }
    }
  }
</style>
